<template>
  <view class="history-page">
    <!-- 头部导航栏 -->
    <view class="top-header">
      <view class="header-left">
        <image
          class="logo"
          src="/static/login/logo.png"
          mode="aspectFit"
        ></image>
        <text class="app-title">查房历史</text>
      </view>

      <view class="header-right">
        <view class="user-section" @click="toggleUserMenu">
          <image
            class="user-avatar"
            src="/static/login/logo.png"
            mode="aspectFit"
          ></image>
          <text class="username">{{ username }}</text>
          <text class="arrow">▼</text>

          <!-- 用户下拉菜单 -->
          <view v-if="showMenu" class="user-menu">
            <view class="menu-option" @click.stop="logout">
              <text>退出登录</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 搜索栏 -->
      <view class="search-bar">
        <input
          v-model="searchText"
          placeholder="搜索关键词"
          @input="onSearch"
        />
        <image
          class="search-icon"
          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"
          mode="aspectFit"
        ></image>
      </view>

      <!-- 患者列表 -->
      <view class="patient-list">
        <view
          class="patient-card"
          v-for="(patient, index) in filteredPatients"
          :key="index"
          @click="viewPatientDetail(patient)"
        >
          <view class="card-header">
            <view class="department">
              <text>{{ patient.department }}</text>
            </view>
            <view class="patient-info">
              <text class="name">{{ patient.name }}</text>
              <text class="gender-age"
                >{{ patient.gender }} {{ patient.age }}岁</text
              >
            </view>
          </view>

          <view class="card-body">
            <view class="info-row">
              <text class="label">住院号:</text>
              <text class="value">{{ patient.admissionNo }}</text>
              <text class="label">主管医生:</text>
              <text class="value">{{ patient.doctor }}</text>
              <text class="label">床号:</text>
              <text class="value">{{ patient.bedNo }}</text>
            </view>
            <view class="info-row">
              <text class="label">诊断:</text>
              <text class="value">{{ patient.diagnosis }}</text>
              <text class="label">主管护士:</text>
              <text class="value">{{ patient.nurse }}</text>
              <text class="label">入院时间:</text>
              <text class="value">{{ patient.admissionTime }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      showMenu: false,
      searchText: "",
      // 历史患者列表数据
      patientList: [
        {
          department: "消化内科",
          name: "张三",
          gender: "男",
          age: 35,
          admissionNo: "ZY20240701",
          doctor: "李医生",
          bedNo: "101",
          diagnosis: "胃溃疡伴出血",
          nurse: "王护士",
          admissionTime: "2024-06-15 09:00",
        },
        {
          department: "心血管内科",
          name: "李四",
          gender: "女",
          age: 62,
          admissionNo: "ZY20240615",
          doctor: "陈医生",
          bedNo: "205",
          diagnosis: "高血压、冠心病",
          nurse: "刘护士",
          admissionTime: "2024-05-20 14:30",
        },
        {
          department: "呼吸内科",
          name: "王五",
          gender: "男",
          age: 58,
          admissionNo: "ZY20240528",
          doctor: "张医生",
          bedNo: "308",
          diagnosis: "慢性阻塞性肺疾病急性加重",
          nurse: "赵护士",
          admissionTime: "2024-05-10 11:15",
        },
        {
          department: "内分泌科",
          name: "赵六",
          gender: "女",
          age: 45,
          admissionNo: "ZY20240505",
          doctor: "孙医生",
          bedNo: "412",
          diagnosis: "2型糖尿病、糖尿病肾病",
          nurse: "钱护士",
          admissionTime: "2024-04-28 08:45",
        },
        {
          department: "神经内科",
          name: "孙七",
          gender: "男",
          age: 71,
          admissionNo: "ZY20240420",
          doctor: "周医生",
          bedNo: "203",
          diagnosis: "脑梗死恢复期",
          nurse: "吴护士",
          admissionTime: "2024-04-10 16:20",
        },
        {
          department: "肾内科",
          name: "周八",
          gender: "女",
          age: 52,
          admissionNo: "ZY20240315",
          doctor: "郑医生",
          bedNo: "506",
          diagnosis: "慢性肾功能不全",
          nurse: "郭护士",
          admissionTime: "2024-03-05 10:30",
        },
      ],
    };
  },
  computed: {
    filteredPatients() {
      if (!this.searchText) {
        return this.patientList;
      }
      return this.patientList.filter(
        (p) =>
          p.name.includes(this.searchText) ||
          p.admissionNo.includes(this.searchText) ||
          p.bedNo.includes(this.searchText)
      );
    },
  },
  onLoad() {
    // 检查登录状态
    const isLogin = uni.getStorageSync("isLogin");
    const username = uni.getStorageSync("username");

    if (!isLogin) {
      // 未登录，跳转到登录页
      uni.reLaunch({
        url: "/pages/login/index",
      });
      return;
    }

    this.username = username;
  },
  methods: {
    onSearch() {
      // 实时搜索，过滤结果已由computed处理
    },
    toggleUserMenu() {
      this.showMenu = !this.showMenu;
    },
    logout() {
      this.showMenu = false;
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync("isLogin");
            uni.removeStorageSync("username");
            uni.reLaunch({
              url: "/pages/login/index",
            });
          }
        },
      });
    },
    viewPatientDetail(patient) {
      // 跳转到患者查房历史详情页面
      const patientData = encodeURIComponent(JSON.stringify(patient));
      uni.navigateTo({
        url: `/pages/patient/history?patientData=${patientData}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.history-page {
  height: 100vh;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;

  // 顶部导航栏
  .top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    z-index: 999;

    .header-left {
      display: flex;
      align-items: center;

      .logo {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
      }

      .app-title {
        font-size: 36rpx;
        color: #ffffff;
        font-weight: bold;
      }
    }

    .header-right {
      position: relative;

      .user-section {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 40rpx;
        padding: 10rpx 24rpx;
        position: relative;

        .user-avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          margin-right: 16rpx;
          background: #ffffff;
        }

        .username {
          font-size: 28rpx;
          color: #ffffff;
          margin-right: 12rpx;
        }

        .arrow {
          font-size: 20rpx;
          color: rgba(255, 255, 255, 0.8);
        }

        &:active {
          opacity: 0.8;
        }

        .user-menu {
          position: absolute;
          top: 90rpx;
          right: 0;
          background: #ffffff;
          border-radius: 12rpx;
          box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
          min-width: 200rpx;
          overflow: hidden;

          .menu-option {
            padding: 24rpx 32rpx;

            text {
              font-size: 28rpx;
              color: #333333;
            }

            &:active {
              background: #f5f7fa;
            }
          }
        }
      }
    }
  }

  // 主内容区
  .main-content {
    margin-top: 120rpx;
    padding: 0;
    flex: 1;
    overflow-y: auto;

    // 搜索栏
    .search-bar {
      position: fixed;
      top: 120rpx;
      left: 0;
      right: 0;
      padding: 20rpx 40rpx;
      background: #ffffff;
      display: flex;
      align-items: center;
      z-index: 998;
      border-bottom: 1rpx solid #e5e7eb;

      input {
        flex: 1;
        height: 64rpx;
        background: #f5f7fa;
        border-radius: 32rpx;
        padding: 0 48rpx 0 24rpx;
        font-size: 28rpx;
      }

      .search-icon {
        width: 36rpx;
        height: 36rpx;
        position: absolute;
        right: 56rpx;
      }
    }

    // 患者列表
    .patient-list {
      margin-top: 104rpx;
      padding: 20rpx 40rpx 40rpx 40rpx;

      .patient-card {
        background: #ffffff;
        border-radius: 16rpx;
        padding: 28rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

        .card-header {
          display: flex;
          align-items: center;
          margin-bottom: 24rpx;

          .department {
            background: #10b981;
            color: #ffffff;
            padding: 6rpx 18rpx;
            border-radius: 8rpx;
            margin-right: 20rpx;

            text {
              font-size: 24rpx;
            }
          }

          .patient-info {
            display: flex;
            align-items: center;

            .name {
              font-size: 30rpx;
              color: #333333;
              font-weight: bold;
              margin-right: 20rpx;
            }

            .gender-age {
              font-size: 26rpx;
              color: #666666;
            }
          }
        }

        .card-body {
          .info-row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 16rpx;

            &:last-child {
              margin-bottom: 0;
            }

            .label {
              font-size: 26rpx;
              color: #999999;
              margin-right: 12rpx;
            }

            .value {
              font-size: 26rpx;
              color: #333333;
              margin-right: 32rpx;
            }
          }
        }
      }
    }
  }
}
</style>
